<template>
  <div class="orders-container">
    <div class="page-header">
      <h2 class="page-title">订单管理</h2>
      <div class="page-desc">管理所有用户订单，处理发货和查看订单详情</div>
    </div>

    <el-card class="filter-card">
      <div class="filter-header">
        <el-icon><Search /></el-icon>
        <span>筛选查询</span>
      </div>
      <el-divider />
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.orderNo" placeholder="输入订单号搜索" clearable prefix-icon="Search" />
        </el-form-item>
        <el-form-item label="订单状态" style="width: 200px;">
          <el-select v-model="searchForm.status" placeholder="全部状态" clearable>
            <el-option label="待付款" value="pending" />
            <el-option label="已付款" value="paid" />
            <el-option label="配送中" value="shipping" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="cancelled" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item class="action-buttons">
          <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
          <el-button @click="resetSearch" :icon="Refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="data-card">
      <div class="table-header">
        <div class="left">
          <el-icon><List /></el-icon>
          <span>订单列表</span>
        </div>
        <div class="right">
          <el-button type="primary" :icon="Refresh" circle size="small" @click="fetchOrders"></el-button>
        </div>
      </div>
      <el-divider />

      <div class="data-overview">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="data-item">
              <div class="title">待付款</div>
              <div class="count">{{ orderCounts.pending || 0 }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="data-item">
              <div class="title">备货中</div>
              <div class="count">{{ orderCounts.paid || 0 }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="data-item">
              <div class="title">配送中</div>
              <div class="count">{{ orderCounts.shipping || 0 }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="data-item">
              <div class="title">已完成</div>
              <div class="count">{{ orderCounts.completed || 0 }}</div>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-table
        v-loading="loading"
        :data="ordersList"
        style="width: 100%; table-layout: fixed;"
        border
        stripe
        row-key="id"
        class="order-table"
      >
        <el-table-column type="expand">
          <template #default="props">
            <div class="order-expand">
              <div class="order-items">
                <div class="items-header">订单商品</div>
                <div v-for="(item, index) in props.row.items" :key="index" class="item-row">
                  <div class="item-image">
                    <el-image :src="item.product.image" fit="cover" :preview-src-list="[item.product.image]"></el-image>
                  </div>
                  <div class="item-info">
                    <div class="item-name">{{ item.product.name }}</div>
                    <div class="item-sku">{{ item.sku.specs }}</div>
                  </div>
                  <div class="item-price">¥{{ item.sku.price }}</div>
                  <div class="item-quantity">x{{ item.quantity }}</div>
                  <div class="item-subtotal">¥{{ (item.sku.price * item.quantity).toFixed(2) }}</div>
                </div>
                
                <div class="order-summary">
                  <div class="summary-item">
                    <span class="label">商品小计：</span>
                    <span class="value">¥{{ props.row.goodsAmount }}</span>
                  </div>
                  <div class="summary-item">
                    <span class="label">运费：</span>
                    <span class="value">¥{{ props.row.deliveryFee }}</span>
                  </div>
                  <div class="summary-item" v-if="props.row.discountAmount > 0">
                    <span class="label">优惠：</span>
                    <span class="value discount">-¥{{ props.row.discountAmount }}</span>
                  </div>
                  <div class="summary-item total">
                    <span class="label">订单总计：</span>
                    <span class="value">¥{{ props.row.totalAmount }}</span>
                  </div>
                </div>
              </div>
              <div class="order-address" v-if="props.row.address">
                <div class="address-header">收货信息</div>
                <div class="address-content">
                  <el-icon><Location /></el-icon>
                  <span>{{ props.row.address.recipientName }} {{ props.row.address.recipientPhone }}</span>
                  <span>{{ formatAddress(props.row.address) }}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderNo" label="订单号" >
          <template #default="scope">
            <div class="order-no">
              <el-icon><Tickets /></el-icon>
              <span>{{ scope.row.orderNo }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收货信息" width="180">
          <template #default="scope">
            <div v-if="scope.row.address" class="address-brief">
              <el-icon><Location /></el-icon>
              <el-tooltip :content="formatAddress(scope.row.address)" placement="top">
                <span class="ellipsis">{{ scope.row.address.recipientName }} {{ formatAddressBrief(scope.row.address) }}</span>
              </el-tooltip>
            </div>
            <span v-else>无收货信息</span>
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="订单金额" width="120">
          <template #default="scope">
            <span class="price-tag">¥{{ scope.row.totalAmount }}</span>
            <div class="price-detail">
              <small>商品: ¥{{ scope.row.goodsAmount }}</small>
              <small>运费: ¥{{ scope.row.deliveryFee }}</small>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.orderStatus)" effect="light">
              {{ getStatusText(scope.row.orderStatus, scope.row.payStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="支付方式" width="120">
          <template #default="scope">
            <el-tag type="info" effect="plain" size="small">{{ getPaymentMethodText(scope.row.paymentMethod) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="配送方式" width="120">
          <template #default="scope">
            <el-tag type="info" effect="plain" size="small">{{ getDeliveryTypeText(scope.row.deliveryType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="下单时间" width="180">
          <template #default="scope">
            <div class="time-info">
              <el-icon><Calendar /></el-icon>
              <span>{{ scope.row.createdAt }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <div class="operation-buttons">
              <el-tooltip content="查看详情" placement="top">
                <el-button 
                  type="primary" 
                  :icon="View" 
                  circle 
                  size="small" 
                  @click="viewOrderDetail(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="备货完成" placement="top" v-if="scope.row.payStatus === 1 && (scope.row.orderStatus < 2 || scope.row.status === 'paid') && scope.row.deliveryType === 'local'">
                <el-button 
                  type="success" 
                  :icon="TakeawayBox" 
                  circle 
                  size="small" 
                  @click="handleReadyForDelivery(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="自提准备完成" placement="top" v-if="scope.row.payStatus === 1 && scope.row.deliveryType === 'self' && (scope.row.orderStatus < 2 || scope.row.status === 'paid')">
                <el-button 
                  type="warning" 
                  :icon="TakeawayBox" 
                  circle 
                  size="small" 
                  @click="handleReadyForPickup(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="分配骑手" placement="top" v-if="scope.row.payStatus === 1 && scope.row.orderStatus === 3 && scope.row.deliveryType === 'local' && (!scope.row.delivery?.riderId || scope.row.delivery?.riderId === -1)">
                  <el-button 
                  type="primary" 
                    :icon="Bicycle" 
                    circle 
                    size="small" 
                  @click="openAssignRiderDialog(scope.row)"
                  ></el-button>
                </el-tooltip>
              <el-tooltip content="打印订单" placement="top">
                <el-button 
                  type="info" 
                  :icon="Printer" 
                  circle 
                  size="small" 
                  @click="printOrder(scope.row)"
                ></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-size="searchForm.pageSize"
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 配送方式对话框 -->
    <el-dialog title="配送方式选择" v-model="shipDialogVisible" width="500px" class="ship-dialog">
      <div class="dialog-content">
        <div class="order-brief">
          <div class="order-no">订单号：{{ shipForm.orderNo }}</div>
          <div class="order-time">下单时间：{{ currentOrder?.createdAt }}</div>
        </div>
        <el-divider />
        <el-form :model="shipForm" label-width="100px" ref="shipFormRef" :rules="shipRules">
          <el-form-item label="配送方式" prop="deliveryType">
            <el-radio-group v-model="shipForm.deliveryType">
              <el-radio label="local">
                <el-icon><Bicycle /></el-icon> 同城配送
              </el-radio>
              <el-radio label="self">
                <el-icon><User /></el-icon> 自提
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="shipDialogVisible = false" :icon="Close">取消</el-button>
          <el-button type="primary" @click="confirmShip" :loading="shipLoading" :icon="Check">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 分配骑手对话框 -->
    <el-dialog title="分配骑手" v-model="assignRiderDialogVisible" width="500px" class="assign-rider-dialog">
      <div class="dialog-content">
        <div class="order-brief">
          <div class="order-no">订单号：{{ assignRiderForm.orderNo }}</div>
          <div class="order-time">下单时间：{{ currentOrder?.createdAt }}</div>
          <div class="order-address" v-if="currentOrder?.address">
            <span>收货地址：{{ formatAddress(currentOrder?.address) }}</span>
          </div>
        </div>
        <el-divider />
        <el-form :model="assignRiderForm" label-width="100px" ref="assignRiderFormRef" :rules="assignRiderRules">
          <el-form-item label="选择骑手" prop="riderId">
            <el-select v-model="assignRiderForm.riderId" placeholder="请选择骑手" filterable :loading="ridersLoading">
              <el-option
                v-for="rider in availableRiders"
                :key="rider.id"
                :label="`${rider.name} (${rider.phone}) - 当前${rider.currentOrderCount}单`"
                :value="rider.id"
              >
                <div class="rider-option">
                  <span>{{ rider.name }}</span>
                  <span class="rider-phone">{{ rider.phone }}</span>
                  <el-tag size="small" :type="rider.status === 1 ? 'success' : 'warning'">
                    {{ rider.status === 1 ? '空闲' : '忙碌' }} ({{ rider.currentOrderCount }}单)
                  </el-tag>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="assignRiderDialogVisible = false" :icon="Close">取消</el-button>
          <el-button type="primary" @click="confirmAssignRider" :loading="assignRiderLoading" :icon="Check">确认分配</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getOrders, confirmReadyForPickup, confirmLocalOrderReady, assignRider, manualAssignRider } from '@/api/orders';
import { getAvailableRiders2 } from '@/api/riders';
import { useRouter } from 'vue-router';
import { 
  Search, 
  Refresh, 
  Calendar, 
  Tickets, 
  Location, 
  View, 
  Printer, 
  List, 
  Check,
  Close,
  TakeawayBox,
  Bicycle,
  User
} from '@element-plus/icons-vue';

const router = useRouter();
const loading = ref(false);
const ordersList = ref([]);
const total = ref(0);
const dateRange = ref([]);

// 订单统计
const orderCounts = reactive({
  pending: 0,
  paid: 0,
  shipping: 0,
  completed: 0
});

// 搜索表单
const searchForm = reactive({
  page: 1,
  pageSize: 10,
  orderNo: '',
  status: '',
  startTime: '',
  endTime: ''
});

// 配送方式相关
const shipDialogVisible = ref(false);
const shipLoading = ref(false);
const shipFormRef = ref(null);
const currentOrder = ref(null);

const shipForm = reactive({
  orderId: null,
  orderNo: '',
  deliveryType: 'local'
});

const shipRules = {
  deliveryType: [{ required: true, message: '请选择配送方式', trigger: 'change' }]
};

// 分配骑手相关
const assignRiderDialogVisible = ref(false);
const assignRiderLoading = ref(false);
const ridersLoading = ref(false);
const assignRiderFormRef = ref(null);
const assignRiderForm = reactive({
  orderId: null,
  orderNo: '',
  riderId: null
});
const availableRiders = ref([]);

const assignRiderRules = {
  riderId: [{ required: true, message: '请选择骑手', trigger: 'change' }]
};

// 获取订单列表
const fetchOrders = async () => {
  loading.value = true;
  try {
    const params = { ...searchForm };
    const res = await getOrders(params);
    if (res.code === 200) {
      ordersList.value = res.data.items.map(order => {
        return {
          ...order,
          statusText: getStatusText(order.orderStatus, order.payStatus)
        };
      });
      total.value = res.data.total;
      
      // 计算各状态订单数量
      countOrdersByStatus();
    } else {
      ElMessage.error(res.msg || '获取订单列表失败');
    }
  } catch (error) {
    console.error('获取订单列表失败:', error);
    ElMessage.error('获取订单列表失败');
  } finally {
    loading.value = false;
  }
};

// 计算各状态订单数量
const countOrdersByStatus = () => {
  // 重置计数
  Object.keys(orderCounts).forEach(key => {
    orderCounts[key] = 0;
  });
  
  // 统计各状态数量
  ordersList.value.forEach(order => {
    if (order.payStatus === 0 && order.orderStatus === 0) {
      orderCounts.pending++;
    } else if (order.orderStatus < 2 || order.status === 'paid') {
      orderCounts.paid++;
    } else if (order.orderStatus === 2 || order.orderStatus === 3 || order.status === 'packaging' || order.status === 'shipping') {
      orderCounts.shipping++;
    } else if (order.orderStatus === 4 || order.status === 'completed') {
      orderCounts.completed++;
    }
  });
};

// 获取订单状态文本
const getStatusText = (orderStatus, payStatus) => {
  if (payStatus === 2) return '已退款';
  
  // 处理数字类型的orderStatus
  if (typeof orderStatus === 'number') {
    switch (orderStatus) {
          case 0: return '待处理';
          case 1: return '备货中';
          case 2: return '打包中';
          case 3: return '配送中';
          case 6: return '待确认收货';
          case 4: return '已完成';
          case 5: return '已取消';
      default: return '未知状态';
    }
  }
  
  // 处理字符串类型的status
  if (typeof orderStatus === 'string') {
    switch (orderStatus) {
      case 'pending': return '待付款';
      case 'paid': return '备货中';
      case 'packaging': return '打包中';
      case 'shipping': return '配送中';
      case 'delivered': return '待确认收货';
      case 'completed': return '已完成';
      case 'cancelled': return '已取消';
      default: return orderStatus;
        }
      }
  
      return '待处理';
};

// 获取订单状态类型
const getStatusType = (status) => {
  // 处理数字类型的状态
  if (typeof status === 'number') {
    const statusMap = {
      0: 'warning', // 待处理
      1: 'info',    // 备货中
      2: 'primary', // 打包中
      3: 'success', // 配送中
      6: 'warning', // 待确认收货
      4: 'success', // 已完成
      5: 'info'     // 已取消
    };
    return statusMap[status] || 'info';
  }
  
  // 处理字符串类型的状态
  const statusMap = {
    'pending': 'warning',
    'paid': 'info',
    'packaging': 'primary',
    'shipping': 'success',
    'delivered': 'warning',
    'completed': 'success',
    'cancelled': 'info'
  };
  return statusMap[status] || 'info';
};

// 获取支付方式文本
const getPaymentMethodText = (method) => {
  const methodMap = {
    'wechat': '微信支付',
    'alipay': '支付宝',
    'balance': '余额支付'
  };
  if(!method) return '未支付';
  return methodMap[method] || method;
};

const getDeliveryTypeText = (deliveryType) => {
  const deliveryTypeMap = {
    'local': '同城配送',
    'self': '自提'
  };
  if(!deliveryType) return '未知方式';
  return deliveryTypeMap[deliveryType] || deliveryType;
}

// 格式化地址
const formatAddress = (address) => {
  if (!address) return '';
  return `${address.province}${address.city}${address.district}${address.detailAddress || address.detail || ''}`;
};

// 格式化简短地址
const formatAddressBrief = (address) => {
  if (!address) return '';
  return `${address.province}${address.city}`;
};

// 搜索
const handleSearch = () => {
  searchForm.page = 1;
  if (dateRange.value && dateRange.value.length === 2) {
    searchForm.startTime = dateRange.value[0];
    searchForm.endTime = dateRange.value[1];
  } else {
    searchForm.startTime = '';
    searchForm.endTime = '';
  }
  fetchOrders();
};

// 重置搜索
const resetSearch = () => {
  searchForm.orderNo = '';
  searchForm.status = '';
  dateRange.value = [];
  searchForm.startTime = '';
  searchForm.endTime = '';
  searchForm.page = 1;
  fetchOrders();
};

// 分页
const handleSizeChange = (size) => {
  searchForm.pageSize = size;
  fetchOrders();
};

const handleCurrentChange = (page) => {
  searchForm.page = page;
  fetchOrders();
};

// 查看订单详情
const viewOrderDetail = (order) => {
  try {
    // 确保order.id存在并且是有效值
    if (!order || !order.id) {
      ElMessage.error('订单ID无效，无法查看详情');
      return;
    }
    router.push(`/home/orders/detail/${order.id}`);
  } catch (error) {
    console.error('跳转到订单详情页面失败:', error);
    ElMessage.error('跳转到订单详情页面失败');
  }
};

// 确认发货
const confirmShip = async () => {
  if (!shipFormRef.value) return;
  
  await shipFormRef.value.validate(async (valid) => {
    if (!valid) return;
    
    shipLoading.value = true;
    try {
      let res;
      if (shipForm.deliveryType === 'self') {
        res = await confirmReadyForPickup(shipForm.orderId);
      } else {
        res = await confirmLocalOrderReady(shipForm.orderId);
      }
      
      if (res.code === 200) {
        ElMessage({
          type: 'success',
          message: '操作成功',
          duration: 2000
        });
        shipDialogVisible.value = false;
        fetchOrders(); // 刷新订单列表
      } else {
        ElMessage.error(res.msg || '操作失败');
      }
    } catch (error) {
      console.error('操作失败:', error);
      ElMessage.error('操作失败');
    } finally {
      shipLoading.value = false;
    }
  });
};

// 打印订单
const printOrder = (order) => {
  ElMessage({
    type: 'info',
    message: '打印功能开发中...',
    duration: 2000
  });
};

// 自提准备完成
const handleReadyForPickup = (order) => {
  ElMessageBox.confirm('确认该自提订单商品已准备完成，可以通知用户前来取货？', '确认操作', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await confirmReadyForPickup(order.id);
      if (res.code === 200) {
        ElMessage.success('操作成功，已通知用户可以前来取货');
        fetchOrders(); // 刷新订单列表
      } else {
        ElMessage.error(res.msg || '操作失败');
      }
    } catch (error) {
      console.error('确认自提准备完成失败:', error);
      ElMessage.error('操作失败');
    }
  }).catch(() => {});
};

// 确认订单准备完成（同城配送）
const handleReadyForDelivery = (order) => {
  ElMessageBox.confirm('确认该订单商品已备货完成？点击确认后将自动分配骑手进行配送。', '确认操作', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      const res = await confirmLocalOrderReady(order.id);
      if (res.code === 200) {
        ElMessage.success('操作成功，订单已准备完成并分配骑手进行配送');
        fetchOrders(); // 刷新订单列表
      } else {
        ElMessage.error(res.msg || '操作失败');
      }
    } catch (error) {
      console.error('确认订单准备完成失败:', error);
      ElMessage.error('操作失败');
    }
  }).catch(() => {});
};

// 打开分配骑手对话框
const openAssignRiderDialog = async (order) => {
  currentOrder.value = order;
  assignRiderForm.orderId = order.id;
  assignRiderForm.orderNo = order.orderNo;
  assignRiderForm.riderId = null;
  
  // 获取可用骑手列表
  ridersLoading.value = true;
    try {
    const res = await getAvailableRiders2();
      if (res.code === 200) {
      availableRiders.value = res.data;
        } else {
      ElMessage.error(res.msg || '获取可用骑手列表失败');
    }
  } catch (error) {
    console.error('获取可用骑手列表失败:', error);
    ElMessage.error('获取可用骑手列表失败');
  } finally {
    ridersLoading.value = false;
  }
  
  assignRiderDialogVisible.value = true;
};

// 确认分配骑手
const confirmAssignRider = async () => {
  if (!assignRiderFormRef.value) return;
  
  await assignRiderFormRef.value.validate(async (valid) => {
    if (!valid) return;
    
    assignRiderLoading.value = true;
    try {
      const res = await manualAssignRider(assignRiderForm.orderId, assignRiderForm.riderId);
      if (res.code === 200) {
        ElMessage.success('骑手分配成功');
        assignRiderDialogVisible.value = false;
        fetchOrders(); // 刷新订单列表
      } else {
        ElMessage.error(res.msg || '骑手分配失败');
      }
    } catch (error) {
      console.error('骑手分配失败:', error);
      ElMessage.error('骑手分配失败');
    } finally {
      assignRiderLoading.value = false;
    }
  });
};

onMounted(() => {
  fetchOrders();
});
</script>

<style scoped>
.orders-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-desc {
  font-size: 14px;
  color: #909399;
}

.filter-card, .data-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.filter-header, .table-header {
  display: flex;
  align-items: center;
  padding: 0 0 10px 0;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.filter-header .el-icon, .table-header .el-icon {
  margin-right: 8px;
  color: #409EFF;
}

.search-form {
  padding: 10px 0;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-header .right {
  display: flex;
  gap: 10px;
}

.action-buttons {
  margin-left: auto;
}

.data-overview {
  margin: 20px 0;
}

.data-item {
  text-align: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
  transition: all 0.3s;
}

.data-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.data-item .title {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.data-item .count {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.order-table {
  margin: 20px 0;
  border-radius: 8px;
  overflow: hidden;
}

.price-tag {
  font-weight: bold;
  color: #ff6700;
}

.status-tag {
  padding: 2px 10px;
  border-radius: 12px;
}

.time-info, .order-no {
  display: flex;
  align-items: center;
  gap: 5px;
}

.operation-buttons {
  display: flex;
  gap: 8px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* 订单展开部分样式 */
.order-expand {
  padding: 10px 20px 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.order-items, .order-address {
  margin-top: 15px;
}

.items-header, .address-header {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 14px;
  color: #303133;
  border-left: 3px solid #409EFF;
  padding-left: 10px;
}

.item-row {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px dashed #eee;
}

.item-image {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 4px;
}

.item-image .el-image {
  width: 100%;
  height: 100%;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 14px;
  color: #303133;
  margin-bottom: 5px;
}

.item-sku {
  font-size: 12px;
  color: #909399;
}

.item-price, .item-quantity, .item-subtotal {
  margin: 0 15px;
  color: #606266;
}

.item-subtotal {
  font-weight: bold;
  color: #ff6700;
}

.address-content {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #606266;
  font-size: 14px;
}

/* 发货对话框样式 */
.ship-dialog :deep(.el-dialog__header) {
  text-align: center;
  font-weight: bold;
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid #eee;
}

.ship-dialog :deep(.el-dialog__body) {
  padding: 20px 30px;
}

.ship-dialog :deep(.el-dialog__footer) {
  padding: 10px 20px 20px;
  text-align: center;
}

.dialog-content {
  padding: 0;
}

.order-brief {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #606266;
  margin-bottom: 15px;
}

.company-option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.company-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.full-width {
  width: 100%;
}

/* 订单汇总信息样式 */
.order-summary {
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border-top: 1px solid #eee;
}

.summary-item {
  display: flex;
  justify-content: flex-end;
  margin: 5px 0;
  font-size: 14px;
}

.summary-item .label {
  color: #606266;
  margin-right: 10px;
}

.summary-item .value {
  color: #333;
  min-width: 80px;
  text-align: right;
}

.summary-item .discount {
  color: #67c23a;
}

.summary-item.total {
  margin-top: 10px;
  font-weight: bold;
  border-top: 1px dashed #ddd;
  padding-top: 10px;
}

.summary-item.total .value {
  color: #ff6700;
  font-size: 16px;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.address-brief {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 价格详情样式 */
.price-detail {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #909399;
}

/* 分配骑手对话框样式 */
.assign-rider-dialog :deep(.el-dialog__header) {
  text-align: center;
  font-weight: bold;
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid #eee;
}

.assign-rider-dialog :deep(.el-dialog__body) {
  padding: 20px 30px;
}

.assign-rider-dialog :deep(.el-dialog__footer) {
  padding: 10px 20px 20px;
  text-align: center;
}

.dialog-content {
  padding: 0;
}

.rider-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rider-phone {
  font-size: 12px;
  color: #909399;
}
</style> 